<!--
 * @Author: your name
 * @Date: 2021-09-06 16:25:29
 * @LastEditTime: 2021-09-13 16:20:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \code\ej-webui-team\src\pages\production\index.vue
-->
<template>
    <div class="user">
       <div class="header">
           <div class="header-left">
                <el-image
                    style="width: 100px; height: 100px; border-radius: 50%;"
                    src="http://121.199.29.84:8888/group1/M00/00/12/rBD-SV-Td6-Aawn0AACq962TS9c719.jpg"
                    fit="fill">
                </el-image>
           </div>
           <div class="header-right">
                <el-button type="text" @click="dialogVisible = true">更改头像</el-button>
                <!-- 模态框 -->
                <el-dialog
                   title="更改头像"
                   :visible.sync="dialogVisible"
                   :before-close="handleClose">
                   <span>
                        <!-- 上传图片 -->
                        <el-upload
                           name="修改头像"
                           class="avatar-uploader"
                           action="https://jsonplaceholder.typicode.com/posts/"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload">
                           <img v-if="imageUrl" :src="imageUrl" class="avatar">
                           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                   </span>
                   <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确定修改</el-button>
                   </span>
                </el-dialog>
           </div>
       </div>
       <div class="content" :data="handleClose">
           <h4>登录用户</h4>
           <h4>用户姓名</h4>
           <h4>用户手机</h4>
           <h4>用户姓名</h4>
           <h4>用户角色</h4>
           <h4>用户生日</h4>
           <h4>注册事件</h4>
           <h4>邮箱</h4>
           <h4>用户状态</h4>
       </div>
       <div class="user-footer">
           <el-button type="text" @click="msgClickHandler = true">修改个人信息</el-button>
           <el-dialog
               title="提示"
               :visible.sync="msgClickHandler"
               :before-close="handleClose">
               <el-form :model="form">
                 <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                     <el-form-item label="登录用户">
                        <el-input v-model="form.username" :disabled="true" placeholder="admin1"></el-input>
                     </el-form-item>
                     <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name"></el-input>
                     </el-form-item>
                     <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="form.sex">
                           <el-radio label="男"></el-radio>
                           <el-radio label="女"></el-radio>
                        </el-radio-group>
                     </el-form-item>
                     <el-form-item label="用户手机">
                        <el-input v-model="form.phone"></el-input>
                     </el-form-item>
                      <el-form-item label="用户邮箱">
                        <el-input v-model="form.email"></el-input>
                     </el-form-item>
                      <el-form-item label="出生日期">
                         <el-date-picker type="date" placeholder="选择出生日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                     </el-form-item>
                 </el-form> 
               </el-form>
               <span slot="footer" class="dialog-footer">
                   <el-button @click="msgClickHandler = false">取 消</el-button>
                   <el-button type="primary" @click="msgClickHandler = false">确定修改</el-button>
               </span>
            </el-dialog>
       </div>
    </div>
</template>
<script>
export default {
  data(){
      return{
          imageUrl: '',
          dialogVisible: false,
          msgClickHandler:false,
          form: {
             username:'admin1',
             name: '托马斯',
             sex: '',
             phone:'15512348116',
             email:'',
             date:''
          },
          rules: {
               sex: [
                 { required: true, message: '请选择活动资源', trigger: 'change' }
               ],
               name: [
                 { required: true, message: '请输入姓名', trigger: 'blur' },
               ],
          }
      }
  },
  methods:{
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      imageHandler(){
          
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  }
}
</script>
<style scoped>
.header{
    display: flex;
    border-bottom: 2px solid #f4f4f4;
}
.content{
    border-bottom: 2px solid #f4f4f4;
}
.user-footer{
    float: right;
    padding-right: 15%;
}
.header .header-left{
    width: 50%;
    padding-left: 20%;
    padding-bottom: 1%;
    padding-top: 2%;
}
.header .header-right{
    width: 50%;
    padding-left: 29%;
    padding-top: 8%;
}
 .el-upload {
    border: 1px solid black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #2cb5ac;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>